<template>
  <div v-if="blog" class="hp_blog_detail_box">
    <div class="hp_blog-detail-title">
      <div>{{blog.title}}</div>
      <div style="font-size: 12px;color: #dddddd;line-height: 18px;display: flex;align-items: center;">
        <span>
          {{blog.user_name}} 最后编辑于 {{$moment(new Date(blog.update_time || blog.create_time)).format('YYYY-MM-DD')}}
        </span>
        <div style="display: flex;align-items: center;margin-left: 10px">
          <img :src="require('./img/see.png')" style="width: 20px;height: auto">
          {{blog.see_time}}
        </div>
      </div>
    </div>
    <div v-html="blog.detail"></div>
  </div>
</template>

<script>
import { blogDetail } from '@/api/blog'
export default {
  name: 'bolgDetail',
  data () {
    return {
      blog: null
    }
  },
  methods: {
    async blogDetail () {
      this.blog = await blogDetail({
        id: this.$route.query.id
      })
    }
  },
  mounted () {
    this.blogDetail()
  }
}
</script>

<style scoped lang="stylus">
.hp_blog_detail_box {
  width 100%
  .hp_blog-detail-title {
    line-height 60px
    margin-bottom 20px
    font-size 26px
    border-bottom 1px solid #dddddd
  }
}
</style>
